<script lang="ts">
import { NSelect, type SelectOption } from 'naive-ui'
import { defineComponent, h, reactive, type PropType, toRaw } from 'vue'

type Value = [string | null, string | null, string | null]
type Options = [SelectOption[], SelectOption[], SelectOption[]]

export default defineComponent({
  name: 'FishTail',
  props: {
    value: {
      type: Array as unknown as PropType<Value>,
      default: () => [null, null, null]
    },
    options: {
      type: Array as unknown as PropType<Options>,
      default: () => [[], [], []]
    }
  },
  emits: ['update:value', 'updateValue'],
  setup(props, { emit }) {
    const value = reactive<Value>(toRaw(props.value))

    const handleUpdateValue = (index: number, v: string | null) => {
      value[index] = v
      emit('update:value', value)
      emit('updateValue', value)
    }

    const createIndexInput = (index: number) => {
      return h(NSelect, {
        value: props.value[index],
        onUpdateValue: (v) => handleUpdateValue(index, v),
        options: props.options[index],
        placeholder: '请选择'
      })
    }

    return () => {
      return h(
        'div',
        { style: 'display: flex; flex-wrap: nowrap; gap: 8px 12px' },
        Array.from({ length: 3 }).map((_, i) => createIndexInput(i))
      )
    }
  }
})
</script>
